import React from "react"
import PropTypes from "prop-types"
import storage from "good-storage"
import { observer, inject } from "mobx-react"
import { removeQuery } from "../../../utils/common"
import ApiModel from "../../../api/apiModel/apiModel"
import userAuthFun from "../../../api/userAuth"
import ProvideImg from "../../../components/provideImg/provideImg"
import EndPop from "../../../components/pops/endPop"
import "./uploadSuccess.scss"

@inject("UserStore")
@observer
class UploadSuccess extends React.Component {
  static contextTypes = {
    router: PropTypes.object.isRequired,
  }
  constructor(props) {
    super(props)
    this.state = {
      repeatFlag: false,
      checkImgIndex: 0,
      provideImgFlag: false,
      newArray: [],
    }
  }
  async componentWillMount() {
    let userMsg = await ApiModel.getUserMsg()
    if (userMsg && userMsg.code === 0) {
      userAuthFun.checkUserStatus(userMsg)
    } else {
      storage.set("token", "")
      let newUrl = removeQuery("code", window.location.href)
      window.location.href = newUrl
    }
  }
  componentDidUpdate() {}
  componentDidMount() {
    console.log(this.props)
  }
  // 输入框失去焦点
  outFocus = () => {
    window.scrollTo(0, document.documentElement.clientHeight)
  }
  setValue = (e, key) => {
    this.setState({
      [key]: e.target.value,
    })
  }
  componentWillUnmount() {}
  setImgUrl = (e) => {
    let file = e.currentTarget.files[0]
    console.log(file)
    if (file && file !== undefined) {
      console.log(file)
    }
  }

  textareaChange = (e) => {
    this.setState({
      textarea: e.target.value,
    })
  }
  showProvide = (index) => {
    let { imgsArray } = this.props.UserStore
    let imgsArrayShow = imgsArray.slice(0, 3)
    console.log(imgsArrayShow[index])

    let newArray = []
    if (index === 0) {
      newArray = imgsArrayShow
    } else if (index === 1) {
      newArray.push(imgsArray[1])
      newArray.push(imgsArray[2])
      newArray.push(imgsArray[0])
    } else {
      newArray.push(imgsArray[2])
      newArray.push(imgsArray[0])
      newArray.push(imgsArray[1])
    }
    this.setState({
      provideImgFlag: true,
      newArray,
    })
  }

  render() {
    let { description, imgsArray, headimgurl } = this.props.UserStore
    let imgsArrayShow = imgsArray.slice(0, 3)

    return (
      <div className="upload-success-container">
        {this.state.provideImgFlag && (
          <ProvideImg
            // imgsArrayShow={imgsArrayShow}
            imgsArrayShow={this.state.newArray}
            hideProvide={() =>
              this.setState({
                provideImgFlag: false,
              })
            }
          />
        )}
        <div className="top-area"></div>
        <div className="upload-success-area">
          <div className="top" />
          <div className="main-area">
            <div className="avatar-area">
              <img src={headimgurl} alt="" />
              <div className="title-main">我的作品</div>
            </div>
            <div className="imgs-area">
              {imgsArrayShow.map((item, index) => {
                return (
                  <div
                    className="img-item"
                    key={index}
                    onClick={() => {
                      this.showProvide(index)
                    }}
                  >
                    <img className="img-main" src={item} alt="" />
                  </div>
                )
              })}
            </div>
            <div className="desc-area">{description}</div>
          </div>
          <div
            className="repeat-upload"
            onClick={() => {
              this.setState({ repeatFlag: true })
            }}
          >
            重新上传
          </div>
        </div>
        {/* {this.state.repeatFlag && (
          <div className="confirm-pop-area">
            <img
              className="pop-icon"
              src={require("../../../static/upload/img_tankuang_bubu@3x.png")}
              alt=""
            />
            <div className="pop-main">
              <div className="pop-desc">
                若重新上传则原有作品失效,您确定需要重新上传吗？
              </div>
              <div className="pop-btns">
                <div
                  className="btn-item cancel"
                  onClick={() => {
                    this.setState({ repeatFlag: false })
                  }}
                >
                  取消
                </div>
                <div
                  className="btn-item confirm"
                  onClick={() => {
                    this.props.UserStore.changeUserState("uploadMsg")
                    this.props.UserStore.changeValus("repeatUploadFlag", true)
                  }}
                >
                  确定
                </div>
              </div>
            </div>
          </div>
        )} */}
        {this.state.repeatFlag && (
          <EndPop
            type={"repeat"}
            closeFun={() => {
              this.setState({
                repeatFlag: false,
              })
            }}
          />
        )}
      </div>
    )
  }
}

export default UploadSuccess
